<template>
  <el-button
    type="primary"
    @click.native="onClick"
    class="square-btn square-btn-green"
    :disabled="timer"
  >
    <span v-if="showTimer">{{ count }}</span
    >{{ text }}
  </el-button>
</template>
<script>
import { mobileIsExist, getCode } from '@/api/login'
export default {
  name: 'HycTimerButton',
  props: {
    userMobile: {
      type: String,
      default: '',
    },
    userValidationCode: {
      type: String,
      default: '',
    },
    checkPhone: {
      type: Boolean,
      default: false,
    },
    timerCount: {
      type: Number,
      default: 60,
    },
    btnText: {
      type: String,
      default: '免费获取验证码',
    },
    convertCodeParams: {
      type: Array,
    },
  },
  data() {
    return {
      validArr: [
        {
          validator: () => {
            return !this.userMobile
          },
          message: '请输入手机号码',
        },
        {
          validator: () => {
            return this.userMobile && !/^1[0-9]{10}$/.test(this.userMobile)
          },
          message: '请输入正确的手机号码',
        },
        {
          validator: () => {
            return !this.userValidationCode
          },
          message: '请输入图形验证码',
        },
      ],
      count: this.timerCount,
      text: this.btnText,
      timer: false,
      counter: null,
      showTimer: false,
    }
  },
  destroyed() {
    this.counter && clearInterval(this.counter)
  },
  methods: {
    onClick() {
      if (!this._checkValid()) {
        return false
      }
      if (this.checkPhone) {
        this._checkMobileExist()
      } else {
        this._getCode()
      }
    },
    _checkValid() {
      for (let item of this.validArr) {
        if (item.validator()) {
          this.$message(item.message)
          return false
        }
      }
      return true
    },
    _btnCountDown(handler, params) {
      handler(params).then(
        () => {
          this.timer = true
          this.showTimer = true
          this.text = '秒后重新获取'
          let that = this
          this.counter = setInterval(() => {
            that.count = that.count - 1
            if (that.count === 0) {
              that.text = '获取验证码'
              that.timer = false
              clearInterval(this.counter)
              that.text = '获取验证码'
              this.count = 60
              that.showTimer = false
            }
          }, 1000)
        },
        () => {
          this.text = '重新获取验证码'
          this.timer = false
          this.showTimer = false
          this.count = 60
          this.$emit('changeValidationCode')
        }
      )
    },
    _checkMobileExist() {
      let params = {
        mobile: this.userMobile,
        validationCode: this.userMobile,
        type: 4, //程序写死
      }
      this._btnCountDown(mobileIsExist, params)
    },
    _getCode() {
      this.timer = true
      this.text = '正在获取...'
      let params = {
        mobile: this.userMobile,
        imgCode: this.userValidationCode,
      }

      if (this.convertCodeParams) {
        params = {}
        this.convertCodeParams.forEach((item) => {
          params[item.value] = this[item.parseParams]
        })
      }

      this._btnCountDown(getCode, params)
    },
  },
}
</script>
